<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useArticlesStore, type ArticleItem } from '@/stores/articles'
import { usePerm } from '@/composables/perm'

const loading = ref(false)
const list = ref<ArticleItem[]>([])
const total = ref(0)
const query = reactive({
  page: 1,
  pageSize: 10,
  keyword: '',
  status: '' as '' | ArticleItem['status']
})

const fetchList = async () => {
  loading.value = true
  try {
    const store = useArticlesStore()
    if (!store.items.length) store.hydrate()
    const res = store.list({ 
      keyword: query.keyword, 
      status: query.status === '' ? undefined : query.status as 'draft' | 'published', 
      page: query.page, 
      pageSize: query.pageSize 
    })
    list.value = res.items
    total.value = res.total
  } finally {
    loading.value = false
  }
}

onMounted(fetchList)

const onSearch = () => { query.page = 1; fetchList() }
const onPage = (p: number) => { query.page = p; fetchList() }
const onSize = (s: number) => { query.pageSize = s; query.page = 1; fetchList() }
const perm = usePerm()
</script>

<template>
  <div style="padding:16px">
    <el-card>
      <el-form :inline="true" label-width="80px">
        <el-form-item label="关键词">
          <el-input v-model="query.keyword" placeholder="标题/作者" style="width:200px" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="query.status" placeholder="全部" style="width:160px">
            <el-option label="全部" value="" />
            <el-option label="已发布" value="published" />
            <el-option label="草稿" value="draft" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <router-link v-if="perm.canEditArticles" to="/articles/0">
            <el-button type="success" style="margin-left:8px">新增</el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top:12px">
      <el-table :data="list" v-loading="loading" stripe>
        <el-table-column prop="id" label="#" width="70" />
        <el-table-column prop="title" label="标题" min-width="200">
          <template #default="{ row }">
            <router-link :to="`/articles/detail/${row.id}`">{{ row.title }}</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="row.status==='published'?'success':'info'">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" min-width="180" />
        <el-table-column label="操作" width="280">
          <template #default="{ row }">
            <router-link v-if="perm.canEditArticle(row.author)" :to="`/articles/${row.id}`"><el-button type="primary" link>编辑</el-button></router-link>
            <el-button v-if="perm.canPublishArticles" type="success" link @click="useArticlesStore().togglePublish(row.id)">{{ row.status==='published'?'下线':'发布' }}</el-button>
            <el-button v-if="perm.canDeleteArticle(row.author)" type="danger" link @click="useArticlesStore().remove(row.id); fetchList()">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display:flex; justify-content:flex-end; margin-top:12px">
        <el-pagination
          layout="total, sizes, prev, pager, next"
          :total="total"
          :page-size="query.pageSize"
          :current-page="query.page"
          @current-change="onPage"
          @size-change="onSize"
          :page-sizes="[10,20,50,100]"
        />
      </div>
    </el-card>
  </div>
  
</template>

<style scoped>
</style>


